<template>
  <div>
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" class="navbar"/>
    <div class="banner">
      <img src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png" alt />
    </div>
    <van-tabs @click="onClick" class="sortnav">
      <van-tab title="综合" name="综合" class="active">
        <div class="sortlist">
          <router-link :to="{path: '/home/new/good',query:{id:item.id,openId:17516331686}}" class="item" v-for="item in newgoods" :key="item.id">
            <img :src="item.list_pic_url" alt />
            <p class="name">{{item.name}}</p>
            <p class="price">￥{{item.retail_price}}</p>
          </router-link>
        </div>
      </van-tab>
      <van-tab title="价格" name="价格" class="price">
        <div class="sortlist">
          <router-link :to="{path: '/home/new/good',query:{id:item.id,openId:17516331686}}" class="item" v-for="item in sortlist" :key="item.id">
            <img :src="item.list_pic_url" alt />
            <p class="name">{{item.name}}</p>
            <p class="price">￥{{item.retail_price}}</p>
          </router-link>
        </div>
      </van-tab>
      <van-tab title="分类" name="分类">
        <div class="sortlist">
          <router-link :to="{path: '/home/new/good',query:{id:item.id,openId:17516331686}}" class="item" v-for="item in newgoods" :key="item.id">
            <img :src="item.list_pic_url" alt />
            <p class="name">{{item.name}}</p>
            <p class="price">￥{{item.retail_price}}</p>
          </router-link>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { goodsList } from "@/api/nav";
export default {
  data() {
    return {
      newgoods: [],
      flag: false,
      order: "asc",
      sortlist: []
    };
  },
  created() {
    var obj = this.$route.query;
    var key = Object.keys(obj);
    if (key[0] == "isNew") {
      goodsList({
        isNew: 1
      }).then(res => {
        // console.log(res);
        this.newgoods = res.data;
      });
    } else if (key[0] == "isHot") {
      goodsList({
        isHot: 1
      }).then(res => {
        // console.log(res);
        this.newgoods = res.data;
      });
    }
    // console.log(this.$router.app._route.fullPath);//  /home/new?isNew
    // console.log(this.$route.query);// {isNew: null}
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
      // this.$refs.price.classList.add("aa") // 原生JS的方法
    },
    onClick(name) {
      if (name == "价格") {
        this.flag = !this.flag;
        this.order = this.flag == true ? "asc" : "desc";
        var obj = this.$route.query;
        var key = Object.keys(obj);
        if (key[0] == "isNew") {
          goodsList({
            isNew: 1,
            order: this.order
          }).then(res => {
            console.log(res);
            this.sortlist = res.data;
          });
        } else {
          goodsList({
            isHot: 1,
            order: this.order
          }).then(res => {
            console.log(res);
            this.sortlist = res.data;
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.banner {
  width: 100%;
  height: 3.70667rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.sortnav {
  display: flex;
  background: #fff;
  display: inline-block;
  width: 100%;
  height: 1.04rem;
  line-height: 1.04rem;
}
.sortlist {
  margin-top: 0.26667rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 4.96667rem;
    margin-bottom: 0.06667rem;
    text-align: center;
    color: #4e4e4e;
    background: #fff;
    padding: 0.2rem 0;
    img {
      display: block;
      width: 4.02667rem;
      height: 4.02667rem;
      margin: 0 auto;
    }
    .name {
      margin: 0.2rem 0 0.29333rem 0;
      text-align: center;
      padding: 0 0.26667rem;
      font-size: 0.32rem;
    }
    .price {
      text-align: center;
      font-size: 0.4rem;
      color: #b4282d;
    }
  }
}
</style>